Drill-down এবং Real-time Data Update গুগল চার্টে ডেটার আরও গভীর বিশ্লেষণ এবং ডেটার লাইভ আপডেট প্রদর্শন করার জন্য ব্যবহৃত দুটি অত্যন্ত কার্যকরী টেকনিক। এগুলি ব্যবহার করে আপনি ইউজারের ইনপুট বা লাইভ ডেটার মাধ্যমে ডেটাকে আরও ইন্টারঅ্যাকটিভ এবং আপ-টু-ডেট রাখতে পারেন।
এখানে আমরা Drill-down এবং Real-time Data Update নিয়ে বিস্তারিত আলোচনা করব এবং এগুলি গুগল চার্টে কিভাবে ব্যবহার করা যায় তা দেখাব।
১. Google Charts এ Drill-down
Drill-down হল একটি কৌশল যা ব্যবহারকারীদের মূল ডেটা থেকে আরও বিস্তারিত বা গভীর স্তরের ডেটাতে নেভিগেট করতে সক্ষম করে। গুগল চার্টের মাধ্যমে এটি সহজে করা যায়, বিশেষ করে Pie Chart বা Bar Chart এ যেখানে ক্লিক করলে ব্যবহারকারী আরও বিস্তারিত তথ্য দেখতে পারে।
Drill-down উদাহরণ: Pie Chart থেকে Bar Chart এ ডেটা পরিবর্তন করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drill-down Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
var data1;
var chart;
function drawChart() {
// মূল ডেটা
var data = google.visualization.arrayToDataTable([
['Task', 'Hours'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
is3D: true,
};
chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
// Drill-down ফাংশন
function selectHandler() {
var selection = chart.getSelection();
if (selection.length > 0) {
var item = selection[0];
var category = item.row;
drawDrilldown(category);
}
}
// Drill-down ডেটা
function drawDrilldown(category) {
var drilldownData;
if (category == 0) {
drilldownData = google.visualization.arrayToDataTable([
['Subtask', 'Hours'],
['Research', 4],
['Development', 5],
['Testing', 2]
]);
} else if (category == 1) {
drilldownData = google.visualization.arrayToDataTable([
['Subtask', 'Hours'],
['Breakfast', 1],
['Lunch', 1],
['Dinner', 1]
]);
}
var drilldownOptions = {
title: 'Work Breakdown',
hAxis: {title: 'Tasks'}
};
var drilldownChart = new google.visualization.BarChart(document.getElementById('drilldown_chart'));
drilldownChart.draw(drilldownData, drilldownOptions);
}
</script>
</head>
<body>
<h2>Drill-down Example</h2>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
<div id="drilldown_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- মূল ডেটা (Initial Data): প্রথমে একটি Pie Chart তৈরি করা হয়েছে, যেখানে Work, Eat, Commute, Watch TV, এবং Sleep সম্পর্কিত তথ্য দেখানো হয়েছে।
- selectHandler(): যখন ইউজার একটি স্লাইসে ক্লিক করেন, তখন এই ফাংশনটি কল হয় এবং সিলেক্ট করা স্লাইসের ভিত্তিতে Drill-down ডেটা প্রদর্শন করা হয়।
- Drill-down ডেটা: ড্রিল-ডাউন ফাংশনটি কল করার পর, নির্দিষ্ট স্লাইসের জন্য Bar Chart তৈরি করা হয়।
২. Google Charts এ Real-time Data Update
Real-time Data Update হল সেই পদ্ধতি যা ডেটাকে লাইভ বা রিয়েল টাইমে আপডেট করতে ব্যবহৃত হয়। এটি মূলত একটি ওয়েব পেজের ডায়নামিক চেঞ্জ এবং নতুন ডেটার সাথে আপডেট প্রদর্শন করতে ব্যবহৃত হয়।
Real-time Data Update উদাহরণ: Line Chart এ Real-time Data আপডেট করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-time Data Update Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
var data;
var chart;
var options;
var chartInterval;
function drawChart() {
data = new google.visualization.DataTable();
data.addColumn('number', 'Time');
data.addColumn('number', 'Value');
options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Value'
},
chartArea: { width: '80%' },
};
chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
// Real-time Data Update Function
chartInterval = setInterval(updateData, 1000); // Update every 1 second
}
function updateData() {
var time = new Date().getSeconds();
var value = Math.random() * 100;
data.addRow([time, value]);
if (data.getNumberOfRows() > 10) {
data.removeRow(0); // Remove the first data point after 10 data points to keep the chart clean
}
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Real-time Data Update Example</h2>
<div id="line_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা:
- ডেটা এবং চার্ট তৈরি: প্রথমে একটি Line Chart তৈরি করা হয়েছে এবং Time ও Value কলাম সহ একটি DataTable প্রস্তুত করা হয়েছে।
- Real-time Data আপডেট:
updateData()ফাংশনটি প্রতি সেকেন্ডে নতুন random value জেনারেট করে এবং তা DataTable এ যোগ করে। যদি ডেটার সংখ্যা 10 এর বেশি হয়, তাহলে পুরনো ডেটা মুছে দেওয়া হয়। - setInterval:
setInterval()ব্যবহার করে প্রতি সেকেন্ডে চার্ট আপডেট করা হচ্ছে।
৩. Drill-down এবং Real-time Data Update এর সংমিশ্রণ
Drill-down এবং Real-time Data Update একসাথে ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, আপনি একটি Drill-down Chart তৈরি করতে পারেন, যেখানে প্রতিটি ডেটা সেটের জন্য real-time updates থাকবে এবং ব্যবহারকারীরা আরও বিস্তারিত বিশ্লেষণ করতে পারবে।
সংমিশ্রণ উদাহরণ:
- Real-time Data আপডেট: কোনো ব্যবহারকারীর ইনপুটের ভিত্তিতে ডেটা বা ট্র্যাকিং আপডেট হবে।
- Drill-down: ব্যবহারকারী যখন কোনো স্লাইসে ক্লিক করবে, তখন আরো বিস্তারিত তথ্য প্রদর্শিত হবে।
উপসংহার
Drill-down এবং Real-time Data Update গুগল চার্টে ডেটা ভিজ্যুয়ালাইজেশনকে আরও শক্তিশালী এবং ইন্টারঅ্যাকটিভ করতে সহায়ক। Drill-down ব্যবহারকারীদের ডেটা আরও বিস্তারিত বিশ্লেষণ করতে সাহায্য করে, এবং Real-time Data Update লাইভ ডেটা আপডেটের মাধ্যমে ওয়েবসাইটের তথ্য সর্বদা বর্তমান রাখে। Google Charts এ এই দুটি টেকনিক ব্যবহার করে আপনি আরো কার্যকরী এবং ইন্টারঅ্যাকটিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন।
Read more
